import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Form, Spin, Button, Radio, Select, Modal, Input, Tooltip, Icon, message } from 'antd';
import EditPage from '@/components/EditPage';
import AntdForm from '@/components/AntdForm';
import router from 'umi/router';
import AdSearch from '@/components/AdSearch';
import AdSelect from '@/components/AdSelect';
import AntdFormItem from '@/components/AntdFormItem';
import AntdInput from '@/components/AntdInput';
import prompt from '@/components/Prompt';
import FileReader from '@/components/FileReader';
import AdButton from '@/components/AdButton';
import SearchSelect from '@/components/SearchSelect';
import {
  formItemFragement,
  queryPerson,
  queryDictData,
  queryDict,
  filterAddFile,
  filterDeteteFile,
  formatPrice,
} from '@/utils/common';
import { supplierColumns, columnsUser, columnsBank, checkStrLength } from '@/pages/Common/common';
import { allDictList } from '@/utils/constans';
import {
  allDispatchType,
  selectBillList,
  selectBillDetailAndInfo,
  routeUrl,
  billStatusList,
  allUrl,
  codes,
  caclTotal,
  getBillVehicleIDetails,
  getBillOilDetails,
} from './utils';
import BillInfo from './BillInfo';
import BillVehicleInfo from './BillVehicleInfo';
import BillOilInfo from './BillOilInfo';
import BorrowInfo from './BorrowInfo';
import BillTax from './BillTax';

const { Option } = Select;
const { confirm } = Modal;
const { TextArea } = Input;

@connect(({ vehicle, component, loading, common }) => ({
  borrowInfo: vehicle.borrowInfo,
  billTaxList: vehicle.billTaxList,
  billDetail: vehicle.billDetail,
  dictObject: component.dictObject,
  formValues: vehicle.formValues,
  loading: loading.effects[allDispatchType.detail],
  panes: common.panes,
}))
@Form.create()
export default class BillOperate extends Component {
  state = {
    detailId: '',
    visible: false,
    selectedRows: [],
    newReciverType: '',
    relation: [],
    company: [],
    saveBtn: true,
    commitStatus: false,
    statusTest: 'DRAFT',
    type: '',
    realCurrencyType: '',
    relationObjId: '',
    payCompany: '',
    // newTax: 0,
    // newTaxRate: 0,
    // newUncontainTax: 0,
    // newContainTax: 0,
    showTips: false,
    bankCard: [],
    userId: '',
  };

  componentWillMount() {
    const allDict = [
      allDictList.currencyType,
      allDictList.saleCompany,
      allDictList.payCompany,
      allDictList.billType,
      allDictList.billOilPayobject,
      allDictList.taxRate,
    ];
    queryDict({ props: this.props, allDict });
  }
  //表格显示提示：
  showTipsFun = val => {
    this.setState({
      showTips: val,
    });
  };
  componentDidMount() {
    const {
      match: {
        params: { id },
      },
      billDetail,
    } = this.props;
    if (!id) return;
    this.handleStateChange([{ detailId: id }]);
    const detail = billDetail[id];
    // if (detail) return;
    this.getBillDetails(id);
  }
  getBillDetails = id => {
    selectBillDetailAndInfo({
      type: allDispatchType.detail,
      payload: { id },
      props: this.props,
      callback: data => {
        const {
          realCurrencyType,
          tax,
          taxRate,
          unContainTax,
          containTax,
          relationObjId,
          payCompany,
          receiverType,
        } = data;
        this.props.form.setFieldsValue({ attaQuantity: data.fileList });
        const relation =
          data.receiverType == 'EMPLOYEE'
            ? [{ id: data.relationObjId, sysName: data.relationObj }]
            : [{ customerCode: data.relationObjId, customerName: data.relationObj }];

        this.setState({
          // newTax: tax,
          // newTaxRate: taxRate,
          // newContainTax: containTax,
          // newUncontainTax: unContainTax,
          bankCard: [{ id: data.bankCard }],
          company: [{ customerCode: data.mdsCompanyId, customerName: data.mdsCompanyName }],
          relation: relation,
          commitStatus: data.status == 'DRAFT' || data.status == 'BACK' ? false : true,
          type: data.type,
          realCurrencyType,
          relationObjId,
          userId: data.workNo || data.relationObjId,
          payCompany,
          newReciverType: receiverType,
        });
      },
    });
  };

  handleStateChange = (options = []) => {
    options.map(item => {
      this.setState(item);
    });
  };

  setTabName = payload => {
    const { dispatch } = this.props;
    dispatch({
      type: 'common/setTabsName',
      payload,
      callback: data => {
        if (!data) return;
        router.push(`${routeUrl.edit}/${payload.id}`);
      },
    });
  };

  selectVehicleList = ({ payload = {} } = {}) => {
    const { dispatch, searchValue } = this.props;
    dispatch({
      type: 'vehicle/selectVehicleList',
      payload,
      callback: data => {
        if (!data) return;
        queryPerson({ data, searchValue, dispatch });
      },
    });
  };

  /**
   * 保存数据 flag 0 保存草稿， 1 提交
   */
  saveInfo = (flag, _type) => {
    if (_type === 'cancel') {
      this.setState({
        saveBtn: false,
      });
      return;
    } else if (_type === 'edit') {
      this.setState({
        saveBtn: true,
      });
      return;
    }
    const {
      form,
      dispatch,
      billDetail,
      match: {
        params: { id },
      },
      borrowInfo,
    } = this.props;
    const {
      detailId,
      relation,
      bankCard,
      company,
      saveBtn,
      type,
      newTax,
      newTaxRate,
      newContainTax,
      newUncontainTax,
    } = this.state;
    form.validateFieldsAndScroll((errors, values) => {
      // if (errors) return;
      const {
        attaQuantity,
        relationObjId,
        relationObjId_oil,
        tax,
        taxRate,
        containTax,
        unContainTax,
        ...params
      } = values;
      params.flag = flag;
      // params.tax = Number(newTax);
      // params.taxRate = Number(newTaxRate);
      // params.containTax = Number(newContainTax);
      // params.unContainTax = Number(newUncontainTax);
      if (attaQuantity) {
        params.fileTokens = filterAddFile(attaQuantity);
      }
      if (id) {
        params.id = id;
        if (attaQuantity) {
          params.deleteFileIds = filterDeteteFile(attaQuantity, billDetail[id].fileList);
        }
      }
      //付款对象
      params.relationObjId = relation[0].customerCode || relation[0].id;
      params.relationObj = relation[0].sysName || relation[0].customerName || relation[0].name;
      params.mdsCompanyId = company[0].customerCode || '';
      params.bankCard = bankCard[0] ? bankCard[0].id : '';
      //冲借款：
      //金额判断 1、冲抵金额(总和)不能超出实际付款金额  2、冲抵金额不能大于原币金额！
      if (borrowInfo && borrowInfo.list && borrowInfo.list.length > 0) {
        const realPay = params.realPayable;
        const borrow = borrowInfo.list;
        let data = [];
        let offsetAmountTotal = 0;
        let checkOffsetAmount = false;
        borrow.map(v => {
          if (v.offsetAmount) {
            data.push(v);
          }
          if (Number(v.offsetAmount) > Number(v.loanBalance)) {
            checkOffsetAmount = true;
          }
          offsetAmountTotal = offsetAmountTotal + Number(v.offsetAmount);
        });
        params.rushedJson = JSON.stringify({ rushedListVOS: data });

        if (offsetAmountTotal > Number(realPay) && checkOffsetAmount) {
          prompt({ content: '冲抵金额不能超出实际付款金额和原币金额！', type: 'warn' });
          return;
        }
        if (offsetAmountTotal > Number(realPay)) {
          prompt({ content: '冲抵金额不能超出实际付款金额！', type: 'warn' });
          return;
        }
        if (checkOffsetAmount) {
          prompt({ content: '冲抵金额不能超出原币金额！', type: 'warn' });
          return;
        }
      }
      const billTaxForm = this.childTax.props.form;
      let relationVOS = [];

        console.log('进入:', params);

      billTaxForm.validateFieldsAndScroll(billTaxFormErr => {
        console.log('进入2', params);
        if (errors || billTaxFormErr) {
          console.log('进入3', errors);
          return ;
        }

        const { billTaxList } = this.props;
        let taxListOV = billTaxList[id].list;
        params.billDetailList = taxListOV.filter((_, i) => i !== taxListOV.length - 1);
        const totalList = taxListOV[taxListOV.length - 1];
        console.log('totalList.containTax:', totalList.containTax, 'params.realPayable:', params.realPayable)
        if (totalList && parseFloat(totalList.containTax).toFixed(2) !== parseFloat(params.realPayable).toFixed(2)) {
          prompt({
            content: '实付金额必须等于含税额，请重新输入',
            type: 'error',
          });
          return;
        }
        if (flag) {
          confirm({
            title: '单据提交后，将不允许再进行修改，确认提交？',
            content: ' ',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk: () => {
              this.operateDispatch(params, flag);
            },
          });
        } else {
          this.operateDispatch(params, flag);
        }
      });
    });
  };
  onRef = ref => {
    this.child = ref;
  };
  operateDispatch = (params, flag) => {
    const { dispatch } = this.props;
    dispatch({
      type: allDispatchType.add,
      payload: params,
      callback: data => {
        this.callback(data, flag);
      },
    });
  };

  callback = (data, flag) => {
    if (!data) return;
    const { formValues } = this.props;
    const { detailId, saveBtn } = this.state;
    this.setState({
      saveBtn: !saveBtn,
      commitStatus: flag ? true : false,
      showTips: false,
    });

    if (detailId) {
      this.getBillDetails(detailId);
    } else {
      this.getBillDetails(data);
      this.setTabName({
        id: data,
        isReplaceTab: true,
      });
    }
    selectBillList({ payload: formValues, props: this.props });
  };
  setPanes = panes => {
    const { dispatch } = this.props;
    dispatch({
      type: 'common/setPanes',
      payload: { panes },
    });
  };
  removePane = currentPanes => {
    const { panes } = this.props;
    const newPanes = panes.filter(item => item.key != currentPanes);
    this.setPanes(newPanes);
  };

  removeBill = () => {
    const {
      dispatch,
      formValues,
      location: { pathname },
    } = this.props;
    const { detailId } = this.state;

    confirm({
      title: '确定要删除这条数据吗？',
      content: ' ',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: () => {
        dispatch({
          type: allDispatchType.remove,
          payload: { ids: [detailId] },
          callback: data => {
            if (!data) return;
            selectBillList({ props: this.props, payload: formValues });
            this.removePane(pathname);
            history.back();
          },
        });
      },
    });
  };

  infoAdd = e => {
    e.stopPropagation();
    const { detailId } = this.state;
    if (!detailId) {
      prompt({ content: '请先新增账单，再新增明细', type: 'warn' });
    } else {
      this.setInfoModal();
    }
  };

  setInfoModal = () => {
    const { visible } = this.state;
    this.handleStateChange([{ visible: !visible }]);
  };

  print = () => {
    const { billDetail } = this.props;
    const { detailId } = this.state;
    const detail = billDetail[detailId] || {};
    if (detail.oaNo) {
      window.open(`${routeUrl.print}/${detailId}`);
    } else {
      prompt({ content: '正在同步OA系统，请稍候... ', type: 'warn' });
    }
  };

  headerOperate = () => {
    const {
      match: {
        params: { id },
      },
      billDetail,
    } = this.props;
    const { detailId } = this.state;
    const detail = billDetail[detailId] || {};
    const { saveBtn, commitStatus } = this.state;
    return (
      <div>
        {saveBtn ? (
          <>
            {id && (
              <AdButton
                onClick={() => this.removeBill()}
                text="删除"
                type="danger"
                ghost
                code={codes.remove}
                disabled={commitStatus}
              />
            )}
            <Button.Group style={{ marginLeft: 8 }}>
              <AdButton
                text="保存"
                code={codes.add}
                onClick={this.saveInfo.bind(this, 0, 'save')}
                disabled={commitStatus}
              />
              <AdButton
                text="保存并提交"
                type="primary"
                code={codes.add2}
                onClick={this.saveInfo.bind(this, 1, 'save')}
                disabled={commitStatus}
              />
              {id && (
                <AdButton
                  onClick={() => this.print()}
                  text="打印预览"
                  disabled={detail.status === 'DRAFT'}
                  // code={codes.remove}
                />
              )}
            </Button.Group>
            {id && (
              <AdButton
                style={{ marginLeft: 8 }}
                onClick={this.saveInfo.bind(this, 0, 'cancel')}
                text="取消"
                code={id ? codes.edit : codes.add}
                disabled={commitStatus}
              />
            )}
          </>
        ) : (
          <Button.Group>
            {id && (
              <AdButton
                text="提交"
                code={codes.edit2}
                onClick={this.saveInfo.bind(this, 1)}
                disabled={commitStatus}
              />
            )}
            <AdButton
              onClick={this.saveInfo.bind(this, 0, 'edit')}
              text="编辑"
              type="primary"
              code={id ? codes.edit : codes.add}
              disabled={commitStatus}
            />
          </Button.Group>
        )}
      </div>
    );
  };

  removeInfo = e => {
    e.stopPropagation();
    const { selectedRows, detailId } = this.state;
    const { dispatch, billDetail } = this.props;
    const title = '确定要移除这条数据吗？';
    confirm({
      title: title,
      content: ' ',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: () => {
        dispatch({
          type: allDispatchType.removeInfo,
          payload: { detailId: selectedRows.map(v => v.id), id: detailId },
          callback: data => {
            if (!data) return;
            const type = billDetail[detailId].type;
            this.getBillDetails(detailId);
            selectBillDetailAndInfo({
              type: allDispatchType.info,
              payload: { billId: detailId, type },
              props: this.props,
            });
            type !== 'DRIVERPAPER' && getBillVehicleIDetails(dispatch, detailId, type);
            type === 'OIL' && getBillOilDetails(dispatch, detailId);
          },
        });
      },
    });
  };

  getValue = (values, type) => {
    console.log('value', values, 'type', type);
    if (type == 'relation') {
      this.changeBorrow(values, 'relationObjId');
      this.setState(pre => ({
        bankCard: [],
        userId: values[0].customerCode || values[0].loginName || values[0].id,
      }));
    }
    this.setState({
      [type]: values,
    });
  };
  changeType = val => {
    if (val === 'OIL') {
      this.setState({
        relation: [],
      });
    }
    this.setState({
      type: val,
    });
  };
  //获取冲借款数据：
  changeBorrow = (val, type) => {
    let value = val;
    if (type === 'relationObjId') {
      value = val[0].customerCode || val[0].id;
    }
    this.setState(
      {
        [type]: value,
      },
      () => {
        const { realCurrencyType, relationObjId, payCompany, newReciverType } = this.state;
        if (relationObjId && payCompany && newReciverType) {
          let params = {
            currency: realCurrencyType || 'CNY',
            loanPerson: relationObjId,
            payCompanyId: payCompany,
            receiverType: newReciverType,
          };
          this.child.selectBorrowDetail(params);
        }
      }
    );
  };

  onRef = ref => {
    this.child = ref;
  };
  onRefTax = ref => {
    this.childTax = ref;
  };
  downloadDetailInfo = e => {
    e.stopPropagation();
    const { dispatch } = this.props;
    const { detailId } = this.state;
    dispatch({ type: allDispatchType.detailInfoDownload, payload: { id: detailId } });
  };

  onChangeInput = (key, value) => {
    const { detailId } = this.state;
    const { billDetail } = this.props;
    const detail = billDetail[detailId] || {};
    const realPayable = detail.realPayable;
    if (key === 'containTax') {
      this.setState({
        newContainTax: value,
        newUncontainTax: realPayable - value,
      });
      if (this.state.newTaxRate !== undefined) {
        this.setState({
          newTax: (this.state.newTaxRate / 100) * value,
        });
      }
    }
    if (key === 'taxRate') {
      this.setState({ newTaxRate: value });
      if (this.state.newContainTax) {
        this.setState({
          newTax: (value / 100) * this.state.newContainTax,
        });
      }
    }
  };

  render() {
    const {
      detailId,
      visible,
      selectedRows,
      newReciverType,
      company,
      saveBtn,
      relation,
      commitStatus,
      type,
      // newTax,
      // newTaxRate,
      // newContainTax,
      // newUncontainTax
      showTips,
      userId,
    } = this.state;

    const { form, billDetail, ownCompany, dictObject, loading } = this.props;
    const { getFieldDecorator, getFieldValue } = form;
    const detail = billDetail[detailId] || {};

    const {
      billNo,
      status,
      mdsCompanyId,
      currencyType,
      payable,
      realCurrencyType,
      realPayable,
      relationObjId,
      relationObj,
      fileList,
      payCompany,
      receiverType,
      reasons,
      remarks,
      oaNo,
    } = detail;
    // //不可编辑状态：
    const InciTitle = (
      <span>
        科目明细
        {showTips && (
          <span style={{ color: 'red', marginLeft: 30 }}>当前数据有变化，请注意保存</span>
        )}
      </span>
    );
    const isEmployee = (newReciverType || receiverType) === 'EMPLOYEE' ? true : false;
    const editPageParams = {
      title: billNo || '新增账单',
      headerOperate: this.headerOperate(),
      panelValue: [
        { key: '基础信息' },
        { key: InciTitle },
        { key: '冲借款' },
        detailId && type && type !== 'DRIVERPAPER' && { key: '车辆统计' },
        detailId && type == 'OIL' && { key: '油价统计' },
        detailId && {
          key: '明细',
          extra: (
            <span>
              <AdButton
                code={codes.removeInfo}
                disabled={!selectedRows.length > 0 || commitStatus || !saveBtn}
                onClick={this.removeInfo}
                text="移除"
                type="danger"
                ghost
              />
              <Button.Group style={{ marginLeft: 8 }}>
                <AdButton text="导出" onClick={e => this.downloadDetailInfo(e)} />
                <AdButton
                  disabled={commitStatus || !saveBtn}
                  type="primary"
                  onClick={this.infoAdd}
                  text="新增"
                  code={codes.addInfo}
                />
              </Button.Group>
            </span>
          ),
        },
      ],
    };

    const commonParams = {
      getFieldDecorator,
    };

    const prefixSelector = (name, value) => (
      <AntdFormItem code={name} initialValue={value || undefined} {...commonParams}>
        <Select
          disabled={name === 'currencyType' || !saveBtn}
          style={{ width: 120 }}
          onChange={val => this.changeBorrow(val, name)}
        >
          {dictObject[allDictList.currencyType] &&
            dictObject[allDictList.currencyType].map(item => (
              <Option key={item.code}>{item.value}</Option>
            ))}
        </Select>
      </AntdFormItem>
    );
    //类型说明：
    const typeTips = (
      <span>
        类型
        <sup>
          <Tooltip
            placement="right"
            title={
              dictObject[allDictList.billType] &&
              dictObject[allDictList.billType].map(v => {
                return (
                  <div>
                    <span style={{ color: '#ff8d00' }}>{v.value}</span>：{v.remarks}
                  </div>
                );
              })
            }
          >
            <Icon type="question-circle" style={{ fontSize: 16, color: '#085df9' }} />
          </Tooltip>
        </sup>
      </span>
    );

    const formItem = [
      [
        <AntdFormItem
          label="单号"
          code="billNo"
          initialValue={billNo || '保存后自动生成'}
          {...commonParams}
        >
          <AntdInput disabled={true} />
        </AntdFormItem>,
        <AntdFormItem label="OA单号" code="oaNo" initialValue={oaNo ? oaNo : ' '} {...commonParams}>
          <AntdInput disabled={true} />
        </AntdFormItem>,
        // status && (
        //   <AntdFormItem
        //     label="状态"
        //     code="status"
        //     initialValue={status || '保存后自动生成'}
        //     {...commonParams}
        //   >
        //     <AdSelect isExist={true} disabled={true} data={billStatusList} />
        //   </AntdFormItem>
        // ),
      ],
      [
        <AntdFormItem
          label="所属公司"
          code="mdsCompanyId"
          initialValue={mdsCompanyId || undefined}
          rules={[{ required: true }]}
          {...commonParams}
        >
          {/* <AdSelect
            data={ownCompany}
            url={allUrl.companyList}
            show={{ id: 'customerCode', name: 'customerName' }}
          /> */}
          <SearchSelect
            dataUrl={allUrl.companyList}
            selectedData={this.state.company} // 选中值
            multiple={false} // 是否多选
            showValue="customerName"
            searchName="customerName"
            columns={supplierColumns} // 表格展示列
            onChange={values => this.getValue(values, 'company')} // 获取选中值
            scrollX={400}
            id="bill2-operate-2"
            disabled={commitStatus || !saveBtn}
          />
        </AntdFormItem>,
        <AntdFormItem
          label={typeTips}
          code="type"
          rules={[{ required: true }]}
          initialValue={type || undefined}
          {...commonParams}
        >
          <AdSelect
            isExist={true}
            data={dictObject[allDictList.billType]}
            disabled={billNo || !saveBtn}
            onChange={this.changeType}
          />
        </AntdFormItem>,
      ],
      [
        <AntdFormItem
          label="付款对象类型"
          code="receiverType"
          initialValue={receiverType}
          rules={[{ required: true }]}
          {...commonParams}
        >
          <Radio.Group
            onChange={e => {
              this.handleStateChange([
                { newReciverType: e.target.value, relation: [], bankCard: [] },
              ]);
              form.resetFields(['relationObjId_oil']);
            }}
          >
            <Radio value="EMPLOYEE" disabled={commitStatus || !saveBtn}>
              员工
            </Radio>
            <Radio value="SUPPLIER" disabled={commitStatus || !saveBtn}>
              供应商
            </Radio>
          </Radio.Group>
        </AntdFormItem>,
        type === 'OIL' ? (
          <AntdFormItem
            label="付款对象"
            code="relationObjId_oil"
            rules={[{ required: true }]}
            initialValue={relationObj || undefined}
            {...commonParams}
          >
            {isEmployee ? (
              <SearchSelect
                dataUrl={allUrl.userList}
                columns={columnsUser}
                allowClear={true}
                multiple={false}
                id="bill2-operate"
                showValue="sysName"
                searchName="keyWord"
                scrollX={400}
                onChange={values => this.getValue(values, 'relation')} // 获取选中值
                selectedData={this.state.relation} // 选中值
                disabled={commitStatus || !saveBtn}
              />
            ) : (
              <Select
                disabled={commitStatus || !saveBtn}
                showSearch
                filterOption={(input, option) =>
                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
                onChange={values => {
                  values &&
                    values.length > 0 &&
                    this.getValue(
                      [
                        {
                          id: values[1],
                          name: values[0],
                        },
                      ], //封装数据结构，便于统一处理
                      'relation'
                    );
                }}
              >
                {dictObject[allDictList.billOilPayobject] &&
                  dictObject[allDictList.billOilPayobject].map((item, i) => (
                    <Option key={i} value={[item.value, item.code]}>
                      {item.value}
                    </Option>
                  ))}
              </Select>
            )}
          </AntdFormItem>
        ) : (
          (newReciverType || receiverType) && (
            <AntdFormItem
              label="付款对象"
              rules={[{ required: true }]}
              code="relationObjId"
              initialValue={relationObjId}
              {...commonParams}
            >
              <SearchSelect
                // url={isEmployee ? allUrl.userDetail : allUrl.supplierDetail}
                dataUrl={isEmployee ? allUrl.userList : allUrl.supplierList}
                columns={isEmployee ? columnsUser : supplierColumns}
                allowClear={true}
                multiple={false}
                id="bill2-operate"
                showValue={isEmployee ? 'sysName' : 'customerName'}
                searchName={isEmployee ? 'keyWord' : 'customerName'}
                scrollX={400}
                onChange={values => this.getValue(values, 'relation')} // 获取选中值
                selectedData={this.state.relation} // 选中值
                disabled={commitStatus || !saveBtn}
              />
            </AntdFormItem>
          )
        ),
      ],
      [
        <AntdFormItem
          label="支付公司"
          code="payCompany"
          rules={[{ required: true }]}
          initialValue={
            payCompany && dictObject[allDictList.payCompany]
              ? dictObject[allDictList.payCompany].filter(item => item.code === payCompany).length >
                0
                ? payCompany
                : undefined
              : undefined
          }
          {...commonParams}
        >
          <Select
            disabled={commitStatus || !saveBtn}
            showSearch
            filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
            onChange={values => this.changeBorrow(values, 'payCompany')}
          >
            {dictObject[allDictList.payCompany] &&
              dictObject[allDictList.payCompany].map(item => {
                return <Option key={item.code}>{item.value}</Option>;
              })}
          </Select>
        </AntdFormItem>,
        <AntdFormItem
          label="银行卡"
          code="bankCard"
          rules={[{ required: true }]}
          initialValue={this.state.bankCard || undefined}
          {...commonParams}
        >
          <SearchSelect
            dataUrl={userId ? 'tms/tms-bill/selectBankCard' : ''}
            columns={columnsBank}
            allowClear={true}
            multiple={false}
            id="bill-bankCard"
            showValue="id"
            searchName="id"
            scrollX={400}
            onChange={values => this.getValue(values, 'bankCard')} // 获取选中值
            selectedData={this.state.bankCard} // 选中值
            disabled={commitStatus || !saveBtn}
            payload={{ id: userId }}
          />
        </AntdFormItem>,
      ],
      [
        <AntdFormItem
          label="应付金额"
          code="payable"
          initialValue={payable ? formatPrice(payable) : ''}
          {...commonParams}
        >
          <AntdInput
            mode="money"
            disabled={true}
            addonBefore={prefixSelector('currencyType', currencyType)}
          />
        </AntdFormItem>,
        <AntdFormItem
          label="实付金额"
          code="realPayable"
          rules={[{ required: true }]}
          initialValue={realPayable ? formatPrice(realPayable) : ''}
          {...commonParams}
        >
          <AntdInput
            mode="money"
            addonBefore={prefixSelector('realCurrencyType', realCurrencyType || 'CNY')}
            disabled={commitStatus || !saveBtn}
          />
        </AntdFormItem>,
      ],
      //  [
      //   <AntdFormItem
      //     label="税率"
      //     code="taxRate"
      //     rules={[{ required: true }]}
      //     initialValue={newTaxRate || undefined}
      //     {...commonParams}
      //   >
      //     <AdSelect
      //       isExist={true}
      //       data={dictObject[allDictList.taxRate]}
      //       disabled={commitStatus || !saveBtn}
      //       onChange={this.onChangeInput.bind(this, 'taxRate')}
      //     />
      //   </AntdFormItem>,
      //   <AntdFormItem
      //     label="含税额"
      //     code="containTax"
      //     rules={[{ required: true }]}
      //     initialValue={newContainTax ? formatPrice(newContainTax) : ''}
      //     {...commonParams}
      //   >
      //     <AntdInput
      //       mode="money"
      //       disabled={commitStatus || !saveBtn}
      //       onChange={this.onChangeInput.bind(this, 'containTax')}
      //     />
      //   </AntdFormItem>

      // ],
      // [
      //   <AntdFormItem
      //     label="不含税额"
      //     code="unContainTax"
      //     rules={[{ required: true }]}
      //     initialValue={newUncontainTax ? formatPrice(newUncontainTax) : ''}
      //     {...commonParams}
      //   >
      //     <AntdInput
      //       disabled={true}
      //       mode="money"
      //     />
      //   </AntdFormItem>
      //   ,
      //   <AntdFormItem
      //     label="税额"
      //     code="tax"
      //     rules={[{ required: true }]}
      //     initialValue={newTax ? formatPrice(newTax) : ''}
      //     {...commonParams}
      //   >
      //     <AntdInput
      //       mode="money"
      //       disabled={true}
      //     />
      //   </AntdFormItem>

      // ],
      // [
      //   <AntdFormItem
      //     label="事由"
      //     code="reasons"
      //     rules={[
      //       { required: true },
      //       {
      //         validator: (rule, value, callback) => {
      //           checkStrLength(rule, value, callback, 240, '事由');
      //         },
      //       },
      //     ]}
      //     initialValue={reasons}
      //     {...commonParams}
      //   >
      //     <TextArea disabled={commitStatus || !saveBtn} rows={4} />
      //   </AntdFormItem>,
      // ],
      [
        <AntdFormItem
          label="备注"
          code="remarks"
          rules={[
            { required: true },
            {
              validator: (rule, value, callback) => {
                checkStrLength(rule, value, callback, 200, '备注');
              },
            },
          ]}
          // initialValue={billNo ? `车队系统单号：${billNo}` : remarks || ''}
          initialValue={remarks ? remarks : billNo ? `车队系统单号：${billNo}` : ''}
          {...commonParams}
        >
          <TextArea disabled={commitStatus || !saveBtn} rows={4} />
        </AntdFormItem>,
      ],

      [
        <AntdFormItem
          label="账单/发票"
          code="attaQuantity"
          initialValue={fileList}
          {...commonParams}
        >
          <FileReader urlType="tms" disabled={commitStatus || !saveBtn} />
        </AntdFormItem>,
      ],
    ];

    return (
      <EditPage {...editPageParams}>
        <Spin spinning={detailId ? loading : false}>
          <AntdForm>{formItemFragement(formItem)}</AntdForm>
        </Spin>
        <Fragment>
          <BillTax
            onRef={this.onRefTax}
            detailId={detailId}
            onlyRead={false}
            disabled={commitStatus || !saveBtn}
            showTipsFun={this.showTipsFun}
            realPayable={getFieldValue('realPayable')}
          />
        </Fragment>
        <Fragment>
          <BorrowInfo
            detailId={detailId}
            type={type}
            onRef={this.onRef}
            status={commitStatus || !saveBtn}
          />
        </Fragment>
        {detailId && type && type !== 'DRIVERPAPER' && (
          <Fragment>
            <BillVehicleInfo detailId={detailId} type={type} />
          </Fragment>
        )}
        {detailId && type == 'OIL' && (
          <Fragment>
            <BillOilInfo detailId={detailId} />
          </Fragment>
        )}
        {detailId && (
          <Fragment>
            <BillInfo
              onSelectRow={selectedRows => {
                this.handleStateChange([{ selectedRows }]);
              }}
              detailId={detailId}
              visible={visible}
              setInfoModal={this.setInfoModal}
              type={type}
              status={commitStatus || !saveBtn}
              getBillDetails={this.getBillDetails}
            />
          </Fragment>
        )}
      </EditPage>
    );
  }
}
